<template>
  <div class="query-tag">
    <div>
      {{ showValue }}
    </div>
    <div class="tag-close" @click="close">x</div>
  </div>
</template>

<script>
import { fieldTypes, queryTypes, queryNames, boolTypes } from '../queryDef';

export default {
  name: 'queryTag',
  props: {
    queryCondition: {
      type: Object,
      default: () => {
        return {
          fieldId: '',
          operatorId: '',
          value: '',
        };
      },
    },
    allFields: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    showValue() {
      const { fieldId, operatorId, value } = this.queryCondition;
      let showValue = fieldId;

      const selField = this.allFields.find(x => x.id === fieldId);
      const selOperator = queryTypes.find(x => x.id === operatorId);

      if (selField && selOperator) {
        showValue = selField.fieldEnName;

        if (selOperator.name !== queryNames.RANGE) {
          showValue = showValue + ' ' + selOperator.name + ' ' + value;
        } else {
          const { gte, lte } = value;
          let rangeStart = gte;
          let rangeEnd = lte;

          if (selField.fieldType === fieldTypes.Date) {
            rangeStart = gte ? gte.toLocaleDateString() : '';
            rangeEnd = lte ? lte.toLocaleDateString() : '';
          }

          if (rangeStart) {
            showValue = rangeStart + '< ' + showValue;
          }
          if (rangeEnd) {
            showValue = showValue + '< ' + rangeEnd;
          }
        }
      }

      return showValue;
    },
  },
  methods: {
    close() {
      this.$emit('close', this.queryCondition);
    },
  },
};
</script>

<style scoped>
.query-tag {
  display: flex;
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;

  border-width: 1px;
  border-style: solid;
  border-color: #d9ecff;
  border-radius: 4px;
  box-sizing: border-box;

  background-color: #ecf5ff;
  color: #409eff;

  white-space: nowrap;
}

.tag-close {
  /* margin: 8px 0 8px 5px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center; */
  margin-left: 10px;
  cursor: pointer;
}

/* .tag-close:hover {
  color: #fff;
  background-color: #409eff;

} */
</style>
